<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../vue/vue.js"></script>
</head>
<body>

<div id="app">
    <com-a></com-a>
    <com-b></com-b>
    <com-c></com-c>
</div>

<script>
    //准备一个空的实例对象
    var Event = new Vue();


    var A={
        template:'<div> <span>我是A数据</span> ->{{data}}' +
        ' <input type="button" value="把A数据传给C" @click="send">' +
        '</div>'
        ,
        data(){
            return{
                data:'我是a数据'
            }
        },
        methods:{
            send(){
                Event.$emit('msg',this.data);
            }
        }
    };
    var B={
        template:'<div> <span>我是B数据</span> ->{{data}}' +
        ' <input type="button" value="把B数据传给C" @click="send">' +
        '</div>'
        ,
        data(){
            return{
                data:'我是b数据'
            }
        },
        methods:{
            send(){
                Event.$emit('msg',this.data);
            }
        }
    };
    var C={
        template:'<div><h3>我是C组件</h3>' +
        '<span>接收过来的的数据为:{{data}}</span></div>',
        //接受数据
        mounted(){
//            var _this = this
//            Event.$on('a-msg',function (a) {
//                _this.a = a;
//            })
//            另外一种bind绑定方法
            Event.$on('msg',function (data) {
                this.data = data;
            }.bind(this))
        },
        data(){
            return{
                data:'',
            }
        }
    }
    new Vue({
        components:{
            'com-a':A,
            'com-b':B,
            'com-c':C
        }
    }).$mount('#app')
</script>

</body>
</html>